<script>
import { ElDialog } from 'element-plus'
import { ref } from 'vue'
export default {
  name: 'Dialog',
  props: {
    title: String,
    content: String
  },
  components: {
    ElDialog
  },
  setup(props, { slots }) {
    const dialogVisible = ref(false)
    const handleClose = () => {
      dialogVisible.value = false
    }
    const handleOpen = () => {
      dialogVisible.value = true
    }
    return () => {
      const content = props.content || slots.default() || '--'
      const title = props.title
      return (
        <>
          <el-dialog
            v-model={dialogVisible.value}
            append-to-body
            title={title + '详情'}
            width="30%"
            before-close={handleClose}
          >
            <p>{content}</p>
          </el-dialog>
          <el-link type="primary" class="feedback-btn" onclick={handleOpen}>
            查看内容
          </el-link>
        </>
      )
    }
  }
}
</script>
